<template>
  <div id='tmpl'>
      <!--1.0利用mui中的图文表格实现-->
      <div class="mui-content" style="background-color:#fff">
		    <ul class="mui-table-view mui-grid-view">
		        <li v-for="item in list" class="mui-table-view-cell mui-media mui-col-xs-6">
		            <router-link v-bind="{to:'/goods/goodsinfo/'+item.id}">
		                <img class="mui-media-object" :src="item.img_url">
		                <div class="mui-media-body" v-text="item.title"></div>
                        <div class="desc">
                            <p>
                                <span>￥{{item.sell_price}}</span>
                                <s>￥{{item.market_price}}</s>
                            </p>
                            <p>
                                <h6 class="left">热卖中</h6>
                                <h6 class="right">剩余{{item.stock_quantity}}件</h6>
                            </p>
                        </div>
                    </router-link>
                </li>
		    </ul>    
		</div>
    <!--2.0获取更多按钮-->
      <mt-button type="danger" size="large" plain @click="getmore">更多商品</mt-button>
  </div>
</template>
<script>
import {Toast} from 'mint-ui'; 
import common from '../../kits/common.js';
//代表vm
export default {
  data () {
    return {
        list:[],
        pageindex:1 //代表获取api中的第几页商品数据
    };
  },
  created(){
      //调用
    this.getlist();
  },
  methods:{
    //2.0点击加载更多
    getmore(){
        //1.0实现this.pageindex值的增加1
        this.pageindex++;
         //2.0获取当前this.pageindex值对应的分页数据
         this.getlist(this.pageindex);
    },
    //1.0 获取图片列表
    getlist(pageindex){
        pageindex = pageindex || 1;
        //获取到商品列表详情
        var url = common.apidomain + '/api/getgoods?pageindex='+pageindex;
        this.$http.get(url).then(function(res){
            if(res.body.status != 0){
                Toast(res.body.message);
                return;
            }
            if(res.body.message.length<=0){
                Toast("没有更多商品了");
                return;
            }
             //将数据赋值给this.list
            this.list=res.body.message;
        })
    }
  }
}
</script>
<style lang="css" scoped>
    .mui-table-view.mui-grid-view .mui-table-view-cell {
        border:1px solid rgba(0,0,0,0.4);
        margin-left:4px;
        box-shadow: 0 0 4px #000;
        padding:0;
    }
    .mui-content .mui-media-body{
        color:#0094ff;
    }
    .mui-content .desc{
        height:60px;
        background-color:rgba(0,0,0,0.1);
        margin-top:10px;
        padding:5px;
        text-align:left;
    }
    .mui-content .desc span{
        color:red;
        margin-right:15px;
    }
    .mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn){
        padding:0;
        margin-left:0;
    }
    .mui-content .desc .right{
        position:absolute;
        right:10px;
        bottom:0;
    }
    .mui-content .desc .left{
        position:absolute;
        left:10px;
        bottom:0;
    }
</style>